<style lang="less">
  .loading-list-detail {
    .info {
      .el-row {
        padding-bottom: 10px;
      }
    }
    .ss {
      margin: 5px 0 5px 0;
    }
    .bz {
      border-bottom: 1px solid #dfe6ec;
    }
    .tj {
      text-align: center;
      border-right: 1px solid #dfe6ec;
      border-top: 1px solid #dfe6ec;
      .bg-purple-light {
        margin: 0;
        font-weight: bold;
      }
      .bg-purple {
        padding: 10px;
      }
      .el-col {
        border-left: 1px solid #dfe6ec;
        border-bottom: 1px solid #dfe6ec;
      }
    }
  }
</style>

<template>
  <el-dialog title="装车清单" :visible.sync="dialogVisible" class="loading-list-detail" size="large">
    <div class="info">
      <el-row>
        <el-col :span="24">
          <label>装车单号:{{loadingList.number}}</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <label>运输线路:{{loadingList.transportationName}}</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <label>车牌号:{{loadingList.plateNumber}}</label>
        </el-col>
        <el-col :span="5">
          <label>司机:{{loadingList.driverInfoName}}</label>
        </el-col>
        <el-col :span="5">
          <label>联系电话:{{loadingList.driverInfoPhone}}</label>
        </el-col>
        <el-col :span="9">
          <label>发车时间:{{loadingList.departureDate}}</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <label>车费:{{loadingList.fare}}</label>
        </el-col>
        <el-col :span="5">
          <label>帐户支付:{{loadingList.accountPayment}}</label>
        </el-col>
        <el-col :span="5">
          <label>现金:{{loadingList.cash}}</label>
        </el-col>
        <el-col :span="9">
          <label>预计下一组织到达时间:{{loadingList.expectedArrivalDate}}</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" v-for="item in loadingList.oilCard" :key="item.id">
          <label>{{item.payTypeName}}:{{item.payNumber}}</label>
        </el-col>
        <el-col :span="24" v-for="item in loadingList.etcs" :key="item.id">
          <label>{{item.payTypeName}}:{{item.payNumber}}</label>
        </el-col>
      </el-row>
      <el-row class="bz">
        <el-col :span="24">
          <label>备注:{{loadingList.description}}</label>
        </el-col>
      </el-row>
    </div>
    <el-row class="ss" :gutter="50">
      <el-col :span="6">
        <el-select v-model="loadingListRouteId" clearable style="margin-top: 50px;width: 200px;" placeholder="请选择下货地">
          <el-option
            v-for="item in loadingListRoutes"
            :key="item.id"
            :label="item.dischargeOrganizationName"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" v-if="adjust" @click="add">添加订单</el-button>
      </el-col>
      <el-col :span="18">
        <div class="tj">
          <el-row>
            <el-col :span="3">
              <div class="bg-purple-light">票数</div>
            </el-col>
            <el-col :span="4">
              <div class="bg-purple-light">重量(吨)</div>
            </el-col>
            <el-col :span="4">
              <div class="bg-purple-light">体积(方)</div>
            </el-col>
            <el-col :span="3">
              <div class="bg-purple-light">件数</div>
            </el-col>
            <el-col :span="4">
              <div class="bg-purple-light">回单份数</div>
            </el-col>
            <el-col :span="3">
              <div class="bg-purple-light">代收货款</div>
            </el-col>
            <el-col :span="3">
              <div class="bg-purple-light">到付</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">
              <div class="bg-purple">{{loadingListStatistics.totalTicket}}</div>
            </el-col>
            <el-col :span="4">
              <div class="bg-purple">{{loadingListStatistics.totalWeight.toFixed(2)}}</div>
            </el-col>
            <el-col :span="4">
              <div class="bg-purple">{{loadingListStatistics.totalVolume.toFixed(2)}}</div>
            </el-col>
            <el-col :span="3">
              <div class="bg-purple">{{loadingListStatistics.totalAmount}}</div>
            </el-col>
            <el-col :span="4">
              <div class="bg-purple">{{loadingListStatistics.totalReceiptAmount}}</div>
            </el-col>
            <el-col :span="3">
              <div class="bg-purple">{{loadingListStatistics.totalCollectPaymentAmount.toFixed(2)}}</div>
            </el-col>
            <el-col :span="3">
              <div class="bg-purple">{{loadingListStatistics.totalToPayAmount.toFixed(2)}}</div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-table highlight-current-row border
              :data="trunkTaskTableData"
              v-loading="trunkTaskListLoading"
              style="width: 100%;" height="400">
      <el-table-column type="index" min-width="55">
      </el-table-column>
      <el-table-column prop="order.shipmentsDate" label="发运日期" min-width="120">
      </el-table-column>
      <el-table-column prop="orderNumber" label="运单号" min-width="100">
      </el-table-column>
      <el-table-column prop="order.agingName" label="运输方式" min-width="230">
      </el-table-column>
      <el-table-column prop="loadingListTrunkTask.dischargeOrganizationName" label="下货地" min-width="180">
      </el-table-column>
      <el-table-column prop="order.cargoNames" label="货品名称" min-width="180">
      </el-table-column>
      <el-table-column prop="order.packTypeNames" label="包装" min-width="80">
      </el-table-column>
      <el-table-column prop="amountAndWeightAndVolume" label="件重体" min-width="160" :formatter="formatterOrderCargos">
      </el-table-column>
      <el-table-column prop="order.orderPrice" label="运费(元)" min-width="90">
      </el-table-column>
      <el-table-column prop="order.paymentTypeName" label="结算方式" min-width="100">
      </el-table-column>
      <el-table-column prop="order.receiptAmount" label="回单份数" min-width="100">
      </el-table-column>
      <el-table-column prop="order.collectPaymentAmount" label="代收货款" min-width="100">
      </el-table-column>
      <el-table-column prop="order.toPayAmount" label="到付" min-width="100">
      </el-table-column>
      <el-table-column prop="order.sendTypeName" label="配送方式" min-width="120">
      </el-table-column>
      <el-table-column prop="order.sendTime" label="要求送达时间" min-width="180">
      </el-table-column>
      <el-table-column prop="order.sendContactName" label="收货人" min-width="180">
      </el-table-column>
      <el-table-column prop="order.sendContactPhone" label="收货人电话" min-width="180">
      </el-table-column>
      <el-table-column prop="order.remark" label="备注" min-width="180">
      </el-table-column>
      <el-table-column
        v-if="adjust"
        fixed="right"
        label="操作"
        min-width="120">
        <template slot-scope="scope">
          <el-button
            type="danger"
             @click="remove(scope.row.loadingListTrunkTask.id)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import {trunkTasksPage} from '../../api/stowage/TrunkTask';
import {deleteLoadingListTrunkTask} from '../../api/stowage/LoadingListTrunkTask';
export default {
  name: 'LoadingListDetail',
  componentName: 'LoadingListDetail',
  data () {
    return {
      adjust: false,
      loadingListRouteId: null,
      dialogVisible: false,
      loadingListRoutes: [],
      trunkTaskTableData: [],
      trunkTaskListLoading: false,
      loadingListStatistics: {
        totalTicket: 0,
        totalAmount: 0,
        totalWeight: 0.0,
        totalVolume: 0.0,
        totalToPayAmount: 0,
        totalCollectPaymentAmount: 0.0,
        totalReceiptAmount: 0
      },
      loadingList: {
        id: null,
        etcs: [],
        oilCard: [],
        cash: null,
        accountPayment: null,
        fare: null,
        driverInfoPhone: null,
        driverInfoName: null,
        plateNumber: null,
        transportationName: null,
        number: null
      }
    };
  },
  watch: {
    loadingListRouteId (val) {
      this.trunkTaskQuery();
    }
  },
  methods: {
    add () {
      if (!this.loadingListRouteId) {
        this.$message.warning('请选择下货地');
      } else {
        this.$emit('addTrunkTask', this.loadingListRouteId);
      }
    },
    formatterOrderCargos (row) {
      return row.amount + '件/' + row.weight.toFixed(2) + '吨/' + row.volume.toFixed(2) + '方';
    },
    remove (id) {
      this.$confirm('您确认移出该装车单?', '提示', {
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        let ids = [{
          id: id,
          type: ''
        }];
        deleteLoadingListTrunkTask('', this.loadingList.id, ids).then(res => {
          if (res.data.successFlg) {
            this.$message({
              message: '移出成功',
              type: 'success'
            });
            this.trunkTaskQuery();
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      }).catch(() => {
      });
    },
    trunkTaskQuery () {
      if (this.loadingListRouteId) {
        this.trunkTasks('EQ_loadingListTrunkTask.loadingListRoute.id=' + this.loadingListRouteId);
      } else {
        this.trunkTasks('EQ_loadingListTrunkTask.loadingListRoute.loadingList.id=' + this.loadingList.id);
      }
    },
    trunkTasks (filter) {
      this.trunkTaskListLoading = true;
      trunkTasksPage({
        filters: filter
      }).then(res => {
        let totalTicket = 0;
        let totalAmount = 0;
        let totalWeight = 0;
        let totalVolume = 0;
        let totalReceiptAmount = 0; // 回单
        let totalCollectPaymentAmount = 0; // 代收款
        let totalToPayAmount = 0; // 到付
        if (res.data.successFlg) {
          let list = res.data.detailModelList;
          this.trunkTaskTableData = list;
          totalTicket = list.length;
          list.forEach(item => {
            if (item.order) {
              totalAmount += item.amount;
              totalWeight += item.weight;
              totalVolume += item.volume;
              if (item.order.receiptAmount !== undefined) {
                totalReceiptAmount += item.order.receiptAmount;
              }
              if (item.order.collectPaymentAmount !== undefined) {
                totalCollectPaymentAmount += item.order.collectPaymentAmount;
              }
              if (item.order.toPayAmount !== undefined) {
                totalToPayAmount += item.order.toPayAmount;
              }
            }
          });
          this.trunkTaskListLoading = false;
        }
        if (totalToPayAmount === undefined || totalToPayAmount === null || totalToPayAmount === '') {
          totalToPayAmount = 0;
        }
        if (totalCollectPaymentAmount === undefined || totalCollectPaymentAmount === null | totalCollectPaymentAmount === '') {
          totalCollectPaymentAmount = 0;
        }
        this.loadingListStatistics.totalTicket = totalTicket;
        this.loadingListStatistics.totalVolume = totalVolume;
        this.loadingListStatistics.totalWeight = totalWeight;
        this.loadingListStatistics.totalAmount = totalAmount;
        this.loadingListStatistics.totalReceiptAmount = totalReceiptAmount;
        this.loadingListStatistics.totalCollectPaymentAmount = totalCollectPaymentAmount;
        this.loadingListStatistics.totalToPayAmount = totalToPayAmount;
      });
    },
    show (row, adjust = false) {
      this.adjust = adjust;
      this.dialogVisible = true;
      this.loadingList = row;
      this.loadingListRoutes = Object.assign([], row.routes);
      this.loadingListRoutes.splice(0, 1);
      this.loadingListRouteId = null;
      this.trunkTasks('EQ_loadingListTrunkTask.loadingListRoute.loadingList.id=' + row.id);
    }
  }
};
</script>
